
The aim of this challenge is to create an eye-catching digital graffiti wall using HTML and CSS. By doing so we will improve our CSS skills focusing on CSS positioning, images and text formatting.
Learning Outcomes
In this tutorial, you will learn how to:
- Position elements using absolute positioning
- Resize images using CSS
- Rotate images and text
- Apply transparency effects
- Import and use custom Google Fonts
- Add text shadows and styling effects
Starter Code
We have started the graffiti wall using some HTML and CSS code. You will be able to edit this wall by clicking on the “Edit on Codepen” button.
The HTML code already contains all the images and text elements that will be placed on the wall.
<img src="https://www.101computing.net/wp/wp-content/uploads/arrow.png" id="arrow"> <img src="https://www.101computing.net/wp/wp-content/uploads/peace.png" id="peace"> <img src="https://www.101computing.net/wp/wp-content/uploads/tape.png" id="tape"> <img src="https://www.101computing.net/wp/wp-content/uploads/lightning-strike.png" id="lightning"> <img src="https://www.101computing.net/wp/wp-content/uploads/spraycan.png" id="spraycan"> <img src="https://www.101computing.net/wp/wp-content/uploads/dj-artist.png" id="dj-artist"> <img src="https://www.101computing.net/wp/wp-content/uploads/skateboarder.png" id="skateboarder"> <img src="https://www.101computing.net/wp/wp-content/uploads/astronaut.png" id="astronaut"> <div id="street-artist">#Street Artist</div>
Step 1: Creating the Brick Wall
We have started our CSS code to give our page a brick wall background using the following CSS code:
BODY {
background-image: url(https://www.101computing.net/wp/wp-content/uploads/brick-wall.jpg);
background-repeat: repeat;
}
What does this do?
| CSS Property | Purpose |
|---|---|
| background-image | Sets the image used as the page background |
| background-repeat | Repeats the image to cover the page |
Step 2: Positioning & Resizing Objects
We have started to position a couple elements including the peace symbol. To do so we are using absolute positioning in CSS which let us specify the exact position of our element on the page using the top and and left properties in CSS.


Here is the code to position and resize the peace sign on our wall:
#peace {
position: absolute;
top:120px;
left:600px;
width: 160px;
}
Your turn
Use different selectors such as #arrow, #dj-artist, #astronaut and use the relevant CSS properties to reposition and resize all the images to cover your graffiti wall.
Step 3: Rotating Objects

transform: rotate(20deg);
With his code you can use a positive or a negative angle to rotate your object clockwise or anti-clockwise.
Step 4: Flipping Images

transform: scaleX(-1);
Step 5: Layering Images

z-index: 2;
Step 6: Importing Google Fonts & Formatting Text
For more exciting fonts that the standard web-safe fonts (Arial, Verdana, Times New Roman, etc.), we recommend importing your selection of Google fonts.
For instance, in the example provided, our text “StreetArtist” is formatted using the Frijole font from Google Fonts.
To import it and be able to use it within your CSS code, add the following line at the top of your CSS code:
@import url('https://fonts.googleapis.com/css2?family=Frijole&display=swap');
You can then use some CSS code to change the font family, size and colour of your text:
#urban {
font-family:"Frijole";
font-size:40pt;
color:#441111;
}
Step 7: Adding a Shadow to the Text
It is possible t create a shadow effect to your text which can help improve the contrast and make your text easier to read especially when a page has a background picture.
text-shadow: 2px 2px #ffffff;
CSS Summary
Here is a summary of the CSS properties this challenged focused on:
| Property | Use |
|---|---|
| position:absolute | Place elements anywhere on the page |
| top / left | Specify the position/coordinates of an element on the page when using absolute positioning |
| z-index | Change the layering orders of overlapping elements |
| transform | Rotate or flip an element |
| opacity | Apply transparency to an element |
| font-family | Change the font of your text |
| font-size | Change the size of your text |
| color | Change the colour of your text |
| text-shadow | Add outline/shadow effect to your text |











In this tutorial, we will learn how to animate a character in Python using the Pygame library and a spritesheet. Instead of loading lots of separate images to animate our main sprite/character, we will use one single image containing multiple frames — a much more efficient and professional approach used in real games!






